不要用label裝飾input[type="file"]
Bad example
code:html
<!-- Bad example -->
<label>
選擇檔案
<input type="file" />
</label>
<style>
label {
/* ... */
}
input {
display: none;
}
</style>
將input設為display: none，使用label來取代input
會導致input無法聚焦
label不是clickable元素
將tabindex設為非負值，也無法觸發space／enter鍵
Good example
code:html
<!-- Good example -->
<button>選擇檔案</button>
<input type="file" />
<script>
document.querySelector("button").addEventListener("click", () => {
document.querySelector("input").click();
});
</script>
<style>
button {
/* ... */
}
input {
display: none;
}
</style>
改為button元素
透過event listener觸發input元素的click事件
Good example 2
code:html
<div role="button" tabindex="0">選擇檔案</div>
<input type="file" />
<script>
const buttonElement = document.querySelector("div");
buttonElement.addEventListener("click", () => {
document.querySelector("input").click();
});
buttonElement.addEventListener("keydown", (event) => {
if (!buttonElement.isEqualNode(event.target)) {
return;
}
if (event.keyCode === 32 || event.keyCode === 13) {
event.preventDefault();
document.querySelector("input").click();
}
});
</script>
<style>
div {
/* ... */
}
input {
display: none;
}
</style>